import React, { Component } from 'react';
import { Card, Button } from 'antd';
import { browserHistory } from 'dva/router';
import { connect } from 'dva';

const stys = {
  container: {
    display: 'flex',
    alignItems: 'center',
    flexWrap: 'wrap',
  },
  col: {
    flex: '0 0 33%',
    padding: 20,
  },
  title: {
    color: '#119dd7',
  },
  content: {
    paddingTop: 10,
  }
};

@connect(state => state)
export default class DetailBaseForm extends Component {

  componentDidMount() {
    if (this.props.payload) {
      this.getDetail();
    }
  }

  goBack = () => {
    browserHistory.goBack();
  }

  getDetail = () => {
    const { namespace, dispatch, payload } = this.props;

    dispatch({
      type: `${namespace}/detail`,
      payload,
    });
  }

  render() {
    const { title, namespace, columns = [], showColon = false, extra } = this.props;
    const currState = this.props[namespace];
    const { currentItem = {} } = currState;
    return (
      <Card
        title={title}
        noHovering
        extra={extra || <Button onClick={this.goBack}>返回</Button>}
      >
        <div style={stys.container}>
          {
            columns
              .filter(c => c.dataIndex !== 'index' && c.dataIndex !== 'opt')
              .map(r => (
                <div style={stys.col}>
                  <p style={stys.title}>{r.title}{showColon && ' :'}</p>
                  <p style={stys.content}>{currentItem[r.dataIndex]}</p>
                </div>
              ))
          }
        </div>
      </Card>
    );
  }
}

